<%@page import="cn.bdqn.util.VarUtil"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>超市账单管理系统</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    function checkUser(obj){
    	//userId
		var $this =  $(obj);
	    	if($this.val()==""){
	    		$this.next().css("color","red");
	    		$this.css("border-color","red");
	    		return false;
	    	}else{
	    		$this.next().text("");
	    		$this.css("border-color","green");
	    		return true;
	    	}
    	}
   
   	function pwd(pwd){
   		//userpassword
    	var $pwd =  $(pwd);
    	if($pwd.val()==""){
    		$pwd.next().css("color","red");
    		$pwd.css("border-color","red");
    		return false;
    	}else if($pwd.val().length<6 || $pwd.val().length>20){
    		$pwd.next().css("color","red");
    		$pwd.css("border-color","red");
    		return false;
    	}else{
    		$pwd.next().text("");
    		$pwd.css("border-color","green");
    		return true;
    	}
   	}
   	function repwd(pwd,repwd){
   		var $pwd=$(pwd);
   		var $repwd = $(repwd);
   		if($pwd.val()==""){
    		$repwd.next().css("color","red");
    		$repwd.css("border-color","red");
    		return false;
    	}
    	if($pwd.val()!=$repwd.val()){
    		$repwd.next().text("两次密码输入不一致！").css("color","red");
    		$repwd.css("border-color","red");
    		return false;
    	}else{
    		$repwd.next().text("");
    		$repwd.css("border-color","green");
    		return true;
    	}
   	}
   	function userphone(obj){
   		//userphone
   		var reg = /^1(3|5|8)\d{9}$/;
    	var $this =  $(obj);
    	if($this.val()==""){
    		$this.next().css("color","red");
    		$this.css("border-color","red");
    		return false;
    	}else if(!reg.test($this.val())){
    		$this.next().text("请输入正确的手机号！").css("color","red");
    		$this.css("border-color","red");
    		return false;
    	}else{
    		$this.next().text("");
    		$this.css("border-color","green");
    		return true;
    	}
   	}
   
   	function radio(obj){
   		//userphone
    	var $this =  $(obj);
    	if($(":radio:checked").length==0){
    		$(":radio").parent().find("span").css("color","red");
    		$this.css("border-color","red");
    		return false;
    	}else{
    		$(":radio").parent().find("span").text("");
    		//$radio.css("border-color","green");
    		return true;
    	}
   	}
    $(document).ready(function(){
    	
    	$("#userId").blur(function(){
    		var strData = "userId=" + $(this).val();
    		if(checkUser(this)){
	    		$.ajax({
	    			url: "CheckUserServlet",
	    			type: "get",
	    			data: strData,
	    			dataType: "text",
	    			success: function(data){
	    				if(data=="EXIST"){
	    					$("#userId").next().text("用户已存在，请输入新的用户编号").css("color","red");
	    					$("#userId").css("border-color","red");
	    				}else{
	    					$("#userId").next().text("用户编号输入正确！").css("color","green");
	    					$("#userId").css("border-color","green");
	    				}
	    			}
	    		});
    			
    		}
    	});
    	$("#userName").blur(function(){
    		checkUser(this);
    	});
    	$("#userpassword").blur(function(){
    		pwd(this);
    	});
    	$("#userRemi").blur(function(){
    		var pwd = $("#userpassword");
    		repwd(pwd,this);
    	});
    	$("#userphone").blur(function(){
    		userphone(this);
    	});
    	$(":radio").click(function(){
    		radio(this);
    	});
    	
    	$("form").submit(function(){
	    	
	    	if(checkUser($("#userId")[0]) & checkUser($("#userName")[0]) & pwd($("#userpassword")[0]) & repwd($("#userpassword")[0],$("#userRemi")[0]) & 
	    			userphone($("#userphone")[0]) & radio($(":radio")[0])){
	    		return true;
	    	}
	    	return false;
	    	
    	});
    	
    });
    </script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>超市账单管理系统</h1>

    <div class="publicHeaderR">
        <p><span id="halfDay">下午好！</span><span style="color: #fff21b"> ${sessionScope.user.userName }</span> , 欢迎你！</p>
        <a href="LogoutServlet">退出</a>
    </div>
</header>
<!--时间-->
<section class="publicTime">
    <span id="time">2015年1月1日 11:11  星期一</span>
    <a href="http://www.google.cn/">温馨提示：为了能正常浏览，请使用高版本浏览器！（IE10+）</a>
</section>
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表 <span></span></h2>
        <nav>
            <ul class="list">
                <li><a href="BillListServlet">账单管理</a></li>
                <li><a href="ProviderListServlet">供应商管理</a></li>
                <li id="active"><a href="UserListServlet">用户管理</a></li>
                <li><a href="jsp/password.jsp">密码修改</a></li>
                <li><a href="LogoutServlet">退出系统</a></li>
                <li>在线人数：<%=VarUtil.ONLINE_COUNT %> 人</li>
                <li>访问量：<%=session.getServletContext().getAttribute("count") %> 次</li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>用户管理页面 >> 用户添加页面</span>
        </div>
        <div class="providerAdd">
            <form action="UserAddServlet" method="post">
                <!--div的class 为error是验证错误，ok是验证成功-->
                <div class="">
                    <label for="userId">用户编码：</label>
                    <input type="text" name="userId" id="userId"/>
                    <span>*请输入用户编码，且不能重复</span>
                </div>
                <div>
                    <label for="userName">用户名称：</label>
                    <input type="text" name="userName" id="userName"/>
                    <span >*请输入用户名称</span>
                </div>
                <div>
                    <label for="userpassword">用户密码：</label>
                    <input type="text" name="userpassword" id="userpassword"/>
                    <span>*密码长度必须大于6位小于20位</span>

                </div>
                <div>
                    <label for="userRemi">确认密码：</label>
                    <input type="text" name="userRemi" id="userRemi"/>
                    <span>*请输入确认密码</span>
                </div>
                <div>
                    <label >用户性别：</label>

                    <select name="gender">
                     	<option value="">--请选择--</option>
                        <option value="1">男</option>
                        <option value="0">女</option>
                    </select>
                    <span></span>
                </div>
                <div>
                    <label for="data">出生日期：</label>
                    <input type="date" name="data" id="data"/>
                    <span ></span>
                </div>
                <div>
                    <label for="userphone">用户电话：</label>
                    <input type="text" name="userphone" id="userphone"/>
                    <span >*请输入用户电话</span>
                </div>
                <div>
                    <label for="userAddress">用户地址：</label>
                    <input type="text" name="userAddress" id="userAddress"/>
                </div>
                <div>
                    <label >用户类别：</label>
                    <c:forEach var="type" items="${typeList }">
                    <input type="radio" name="userlei" value="${type.typeNo }"/>${type.typeName }
                    </c:forEach>
                    <span >*请选择用户类别</span>
                </div>
                <div class="providerAddBtn">
                    <!--<a href="#">保存</a>-->
                    <!--<a href="userList.html">返回</a>-->
                    <input type="submit" value="保存" />
                    <input type="button" value="返回" onclick="history.back(-1)"/>
                </div>
            </form>
        </div>

    </div>
</section>
<footer class="footer">
    版权归北大青鸟
</footer>
<script src="js/time.js"></script>

</body>
</html>
